<template>
	<view class="custom-page">
		<hs-status-bar></hs-status-bar>
		<top-bar :haveBack="!shareId" :haveBackIndex="shareId"></top-bar>
		<scroll-view scroll-y="true" class="custom-scroll">
			<image class="share" src="@/static/images/icon/weixin.png" mode="aspectFit"></image>
			<button class="share btn" @click="share">
			</button>
			<view class="share-text">
				<view class="text breathe-animation">分享助力</view>
				<view class="text breathe-animation-delay">立送现金抵扣</view>
			</view>
			<hs-selectPhoneModelPrivate :disabled="true" :phoneModelId="_phoneModelId" @selectModel="selectModel"
				style="display: inline-block;position:absolute;top: 17rpx;left: 17rpx;z-index: 1;"
				ref="selectPhoneModel"></hs-selectPhoneModelPrivate>

			<!-- <hs-phoneModel :materialList="skuList" ref="phoneModel"
				@handleSelectModel="selectModel" @handleSelectMaterial="selectMaterial"></hs-phoneModel> -->

			<swiper :indicator-dots="true" :duration="1000" class="swiper"
				:class="[userInfo.printerId != 0 && userInfo.printerId != null ? 'swiper-printer' : 'swiper-noprinter']"
				@change="onSwiperChange">
				<swiper-item>
					<view class="image-view" @click="previewImage(0)">
						<image class="picture" :src="detailInfo.imageUrl"></image>
					</view>
				</swiper-item>
				<!-- <swiper-item>
					<view class="image-view" @click="previewImage(0)">
						顶层机壳
						<image class="picture btm" :src="baseImageUrl"></image>
						贴纸
						<image class="picture" :src="item.imageUrl" v-for="(item,index) of detailInfo.stickerImageList"
							:key="index" :style="{
								height:item.height*0.75+'rpx',
								width:item.width*0.75+'rpx',
								transform:
								`translate(${0.75 *item.x}rpx, ${0.75 *item.y}rpx)`
								+` rotate(${item.rotationAngle}deg)`
								+` scale(${item.overturn?-1*item.scaleX:item.scaleX},${item.scaleY})`,
								zIndex:item.index
							}"></image>
						顶层机壳
						<image class="picture top" :src="frameImageUrl"></image>
					</view>
				</swiper-item> -->
				<swiper-item v-for="(item, index) of skuList[activeSkuIndex].carouselImages" :key="item.id"
					@click="previewImage(index + 1)">
					<view class="image-view">
						<image class="picture" :src="item.imageUrl" mode="aspectFit"></image>
					</view>
				</swiper-item>
			</swiper>
			<view class="sku-box  hs-full-x">
				<!-- <view class="to-edit" @click="toEdit">
					去设计
				</view> -->
				<view class="phone-model">
					<text class="title">机型：</text>
					<view class="select">
						<!-- <hs-selectPhoneModelPrivate :phoneModelId="_phoneModelId"
							style="display: inline-block;position:relative;" @selectModel="selectModel"><text
								class="text1">▼</text></hs-selectPhoneModelPrivate> -->

						<hs-selectmachine :phoneModelId="_phoneModelId" :isPrivate="true"
							@selectModel="selectModel"><text class="text1">▼</text></hs-selectmachine>

					</view>

				</view>
				<view class="skus">
					<text class="title">材质：</text>
					<view class="select">
						<view class="skus-item" v-for="(item, index) of skuList" :key="item.id"
							@click="chooseMaterial(item, index)"
							:class="{ active: activeMaterialId == item.materialMap[10] }">
							{{ item.shortName + ' ￥' + item.price / 100 }}

						</view>
					</view>
				</view>
			</view>
			<view class="details">
				<view class="details-item" v-for="(item, index) of skuList[activeSkuIndex].detailImages" :key="item.id"
					@click="previewDetailImages(index)">
					<image class="picture"
						:src="item.imageUrl + '?x-oss-process=image/resize,w_750/format,webp/interlace,1'"
						:lazy-load="true" :webp="true" :fade-show="false" :loading="'loading'" mode="aspectFit"></image>
				</view>
			</view>

		</scroll-view>

		<view class="custom-bottom">
			<!-- <view class="custom retry" @click="$u.debounce(retry)">
				重新生成人像
			</view> -->
			<view class="price">
				￥{{ skuList[activeSkuIndex].price / 100 }}
			</view>

			<!--  -->
			<!-- <view class="custom" v-if="isStore!=''" @click="toPrint()"> （废弃）
				现场打印 
			</view> -->
			<view class="custom" v-if="isStore != '' || abroad || merchant" @click="showModalFn">
				<!-- <view class="custom" @click="shouPayCode"> -->
				现场打印
			</view>
			<view v-else class="custom" :class="{ retry: isStore != '' }">
				<button open-type="getPhoneNumber" @getphonenumber.stop="getPhoneNumber" v-if="!phoneNumber"
					class="get-phone">授权并获取手机号</button>
				<view class="" @click="$u.debounce(toBuy)">
					立即购买
				</view>
			</view>
		</view>
		<view class="pay-code-box">
			<u-popup :show="payCodeShow" mode="center" :round="17" @close="payCodeShow = false" closeable
				closeOnClickOverlay safeAreaInsetTop>
				<view class="pay-code">
					<view class="pay-code-title">
						<text>请扫描二维码进行支付</text>
					</view>
					<canvas id="qrcode" canvas-id="qrcode" style="width: 150px;height: 150px;"></canvas>
					<view class="">
						<!-- <text>已支付</text> -->
					</view>
				</view>
			</u-popup>
			<u-modal :closeOnClickOverlay="true" @cancel="cancelPayCode" :showCancelButton="true" :show="showModal"
				:title="modalTitle" :content='modalContent' @confirm="shouPayCode"></u-modal>
		</view>

		<preview-phonecase :stickerImageList="detailInfo.stickerImageList" :frameImageUrl="frameImageUrl"
			:baseImageUrl="baseImageUrl" :detail="skuList[activeSkuIndex].carouselImages"
			ref="previewPhonecase"></preview-phonecase>
		<!-- <share ref="shareBox" :posterImage="detailInfo.imageUrl" type="3" :sourceId="detailInfo.id"
			:price="skuList[activeSkuIndex].price/100"></share> -->
		<share ref="shareBox" :posterImage="currentCarouselImage" type="3" :sourceId="detailInfo.id"
			:price="skuList[activeSkuIndex].price / 100">
		</share>
		<to-print ref="printBox"></to-print>
	</view>
</template>

<script>
import {
	getCustomDetail,
	generateShare,
	getSkuList,
	getShareInfo,
	sendMessage,
	getInfo,
	checkout
} from '@/api/custom.js'
import UQRCode from 'uqrcodejs';
import { createOrder } from '@/api/product.js'
import {
	userLogin
} from "@/utils/utils.js";
import {
	getCreditList
} from '@/api/my.js'
import {
	mapGetters,
	mapMutations
} from 'vuex'
import {
	decryptPhoneNumber,
	setDefaultPhoneModel
} from '@/api/user.js';
import icon from 'uview-ui/libs/config/props/icon';
export default {
	data() {
		return {
			showModal: false,
			modalTitle: '提示',
			modalContent: '',
			payCodeShow: false,
			currentSwiperIndex: 0, // 新增当前轮播图索引
			currentCarouselImage: '', // 新增当前轮播图URL
			shareId: '',
			detailInfo: {},
			_phoneModelId: null,
			isSelectPhoneModel: false,
			// 机壳列表
			skuList: [],
			activeMaterialId: null,
			activeSkuIndex: 0,
			frameImageUrl: '',
			baseImageUrl: '',
			activeMaterialMap: {},
			reflash: true,
			id: '',
			objMaterialMap: {
				11: '',
				10: ''
			},
			abroad: false,
			merchant: false,
			phoneModelName: '',
			payCodeUrl: ''
		}
	},
	computed: {
		...mapGetters(['phoneNumber', 'phoneModelId', 'isStore', 'getCurrentMaterial', 'userInfo', 'phoneModelList']),
	},
	async onShow() {

		// 新增Vuex状态检查 为了从diy页面返回时，可以重新获取机壳列表
		const currentMaterial = this.getCurrentMaterial
		console.log('currentMaterial', currentMaterial);
		if (currentMaterial && currentMaterial.materialMap?.[10]) {
			this.activeMaterialId = currentMaterial.materialMap[10]
		}
		if (!this.reflash) {
			this.reflash = true
		} else {

			if (this.shareId == '') {
				await this.getCustomDetail()
				// 	// if(this.detailInfo){
				// 	// 	let id = this.isSelectPhoneModel  ? this._phoneModelId : this.detailInfo.materialMap[11]
				// 	// 	this.getSkuList(id , true)
				// 	// }

			}
		}
		// 确保默认机型状态正确
		if (this._phoneModelId) {
			this.$store.commit('setPhoneModelId', this._phoneModelId)
		}

		getInfo().then(res => {
			this.abroad = res.data.abroad
			this.merchant = res.data.merchant
		})

	},
	onUnload() {
		// 页面卸载时解绑事件，防止内存泄漏
		uni.$off('payProductStatus')
	},
	methods: {
		...mapMutations(['setPhoneNumber', 'setTotalCredits', 'setCurrentMaterial', 'setPhoneModelId']),
		// 轮播图切换回调
		onSwiperChange(e) {
			this.currentSwiperIndex = e.detail.current

			// 计算实际图片索引（首项是商品主图）
			const actualIndex = Math.max(e.detail.current - 1, 0)

			this.currentCarouselImage =
				e.detail.current === 0 ?
					this.detailInfo.imageUrl :
					this.skuList[this.activeSkuIndex]?.carouselImages?.[actualIndex]?.imageUrl || ''
		},
		// 获取详情
		async getCustomDetail(id = this.id) {
			// 优先使用Vuex中的独立材质存储
			// const materialMap = {
			// 	11: this.phoneModelId,
			// 	10: this.getCurrentMaterial?.materialMap?.[10] // 从Vuex获取材质ID
			// };
			console.log('this.objMaterialMap', this.objMaterialMap);
			let materialMap = this.objMaterialMap[10] == '' || this.objMaterialMap[11] == '' ? {} : this.objMaterialMap
			await getCustomDetail({
				id: id,
				materialMap,
				// materialMap: materialMap
				// materialMap: {
				// 	11:30,
				// 	10:331
				// }
			}).then(res => {
				this.detailInfo = res.data
				this.currentCarouselImage = this.detailInfo.imageUrl
				this.objMaterialMap[10] = this.activeMaterialId = this.detailInfo.materialMap[10]
				this.objMaterialMap[11] = this.detailInfo.materialMap[11]
				this.id = res.data.id
				this._phoneModelId = this.phoneModelId
				this.getSkuList(this.detailInfo.materialMap[11], true)

				// let id = this.isSelectPhoneModel  ? this._phoneModelId : this.detailInfo.materialMap[11]
				// this.getSkuList(id , true)

				// 重置材质选择（新增）
				if (!this.getCurrentMaterial) {
					this.activeMaterialId = res.data.materialMap[10];
					this.$store.commit('setCurrentMaterial', {
						materialMap: res.data.materialMap
					});
				}
			}).catch(async (err) => {
				// console.log('err', err);
				// console.log('err.code', JSON.stringify(materialMap));
				if (err?.code === 3001) {  // 新增3001错误处理
					// 清空本地缓存和Vuex状态
					this.activeMaterialId = null
					// this._phoneModelId = null
					// this.$store.commit('setPhoneModelId', null)
					this.$store.commit('setCurrentMaterial', null)
					await sendMessage({
						type: err.code,
						content: JSON.stringify(materialMap),
						message: err.msg
					}).then(res => {

					})
				}
			})
		},
		// 去编辑
		toEdit() {
			uni.navigateTo({
				url: `/pages/diy/diyPhoneCase?tempId=${this.detailInfo.id}`
			})
		},
		// 放大图片预览
		async previewImage(index) {
			console.log('previewImage', index);
			const allImages = [
				this.detailInfo.imageUrl, // 第一张详情图
				...this.skuList[this.activeSkuIndex]?.carouselImages?.map(i => i.imageUrl) || []
			];
			// 安全索引处理
			const safeIndex = Math.min(index, allImages.length - 1);
			uni.previewImage({
				current: safeIndex,
				urls: allImages
			});

			// this.$refs.previewPhonecase.show(index)
			// this.reflash = false

			// let arr = [this.detailInfo.imageUrl]
			// uni.previewImage({
			// 	current: 0,
			// 	urls: arr
			// });
		},
		// 放大详情图预览
		previewDetailImages(index) {
			const detailImages = this.skuList[this.activeSkuIndex]?.detailImages || [];
			const imageUrls = detailImages.map(item => item.imageUrl); // 提取所有图片的URL
			// 安全索引处理
			const safeIndex = Math.min(index, imageUrls.length - 1);
			uni.previewImage({
				current: safeIndex,
				urls: imageUrls
			});
		},
		// 选择手机型号
		// selectModel(data) {
		// 	console.log('selectModel', data);
		// 	this.isSelectPhoneModel = true
		// 	uni.$u.debounce(() => {
		// 		// this.$store.commit('setPhoneModelId', this._phoneModelId)
		// 		// let materialMap = {
		// 		// 	10: this.getCurrentMaterial.materialMap[10],
		// 		// 	11: data,
		// 		// }
		// 		// this.$store.commit('setCurrentMaterial', materialMap)
		// 		this.getCustomDetail()

		// 		// this.getSkuList(this._phoneModelId)
		// 	})
		// },
		async selectModel(data) {
			console.log('selectModel', data);
			this.objMaterialMap[11] = data; // 更新选中的手机型号ID
			this.isSelectPhoneModel = true;

			// 调用设置默认机型接口
			const res = await setDefaultPhoneModel({
				phoneModelId: data
			});
			console.log('setDefaultPhoneModel', res);
			// this.setPhoneModelId(this.phoneModelList[this.multiIndex[0]].childrenList[this.multiIndex[1]]
			// 		.id)
			// 	this.setPhoneModelName(res.data.phoneModelName)
			this.phoneModelName = res.data.phoneModelName
			// 立即更新本地和Vuex状态
			this._phoneModelId = data;
			this.$store.commit('setPhoneModelId', data);
			this.$store.commit('setPhoneModelName', res.data.phoneModelName);

			// 清除旧材质选择
			// this.$store.commit('setCurrentMaterial', null);
			// this.$u.debounce(() => {
			// 	this.getCustomDetail()
			// })
			// 清除旧材质选择（新增以下三行）
			this.$store.commit('setCurrentMaterial', null);
			this.activeMaterialId = null;
			this.activeMaterialMap = {};
			this.getCustomDetail()
		},
		// 获取机壳列表
		getSkuList(_phoneModelId, isInit) {
			console.log('this.detailInfo', this.detailInfo);
			console.log('getSkuList called with phoneModelId:', _phoneModelId); // 新增调试信息
			getSkuList({
				materialMap: {
					11: _phoneModelId
				},
				materialSubType: this.detailInfo.materialSubType,
				pageSize: 50
			}).then(res => {
				this.skuList = res.data
				console.log('isInit', isInit);
				if (isInit) {//点击分享后/获取详情
					// this.activeSkuIndex = this.skuList.findIndex(item => {
					// 	// return item.id == this.detailInfo.skuId
					// 	return item.materialMap[10] == this.detailInfo.materialMap[10]
					// })
					// this.chooseSku(this.skuList[this.activeSkuIndex], this.activeSkuIndex)
					const targetIndex = res.data.findIndex(item =>
						item.materialMap[10] === this.detailInfo.materialMap[10]
					);
					console.log('[DEBUG] 初始化查找结果:', {
						targetMaterial: this.detailInfo.materialMap[10],
						foundIndex: targetIndex
					});

					this.activeSkuIndex = targetIndex >= 0 ? targetIndex : 0;
					this.chooseSku(res.data[this.activeSkuIndex], this.activeSkuIndex);

					// 强制更新手机型号选择组件
					this.$refs.selectPhoneModel && this.$refs.selectPhoneModel.$forceUpdate();
				} else {//点击选择手机型号后
					let idx = this.skuList.findIndex(item => {
						return this.activeMaterialMap[10] == item.materialMap[10]
					})
					idx = idx == -1 ? 0 : idx
					this.chooseSku(this.skuList[idx], idx)
				}

			})
		},
		chooseMaterial(data, index) {
			this.objMaterialMap[10] = data.materialMap[10] // 更新选中的手机材质ID
			// 先提交Vuex状态更新
			this.$store.commit('setCurrentMaterial', data)
			// 再执行后续操作
			this.chooseSku(data, index)
		},
		// 选择机壳
		async chooseSku(data, index) {
			// 增加材质ID对比校验
			if (this.activeMaterialId === data.materialMap[10]) return
			this.activeMaterialId = data.materialMap[10]

			// this.activeSkuId = data.id
			this.activeSkuIndex = index
			this.activeMaterialMap = data.materialMap
			this.frameImageUrl = data.frameImageUrl
			this.baseImageUrl = data.baseImageUrl
			this.$store.commit('setPhoneModelId', this._phoneModelId)
			console.log('chooseSku', data);
			// this.$store.commit('setCurrentMaterial', data)
			console.log('getCurrentMaterial', this.getCurrentMaterial);
			await this.getCustomDetail()
		},
		// 去购买
		async toBuy() {
			// 确保使用最新产品ID
			// await this.getCustomDetail();
			console.log('toBuy', this.detailInfo.id);
			// return
			let orderData = [{
				customProductId: this.detailInfo.id,
				quantity: 1
			}]
			uni.setStorageSync('orderData', orderData)
			// 增加跳转延迟确保存储完成
			await this.$nextTick();
			uni.navigateTo({
				url: '/pages/order/order'
			})
		},
		// 展示支付二维码弹窗
		async shouPayCode() {
			console.log('=====>', this.userInfo.abroad)
			if (!this.abroad) {
				// 国内商家操作
				this.showModal = false
				this.payCodeShow = true
			} else {
				// 国外商家操作
				this.showModal = false
				await this.createcheckoutFn()
				uni.showToast({ title: 'success', icon: 'success' })

			}
		},
		async createcheckoutFn() {
			try {
				let obj = {
					customProductList: [{
						customProductId: this.detailInfo.id,
						quantity: 1
					}]
				}
				console.log({ ...obj });
				const res = await checkout(obj)
				const printerId = this.userInfo.printerId
				const resp = await createOrder({
					...obj,
					printerId
				})
				this.formatWXPayToQRCode(resp.data.payUrl)
			} catch (err) {
				console.log('err', err);
				uni.showToast({ title: 'error', icon: 'error' })
			}
		},
		async showModalFn() {
			console.log('this.abroad || this.merchant', this.abroad);
			console.log('this.abroad || this.merchant', this.merchant);
			if (this.abroad) {
				console.log('this._phoneModelId', this._phoneModelId);

				this.phoneModelName = this.findPhoneModelById(this.phoneModelList, this._phoneModelId)
				this.modalContent = `机型：${this.phoneModelName}，材质：${this.skuList[this.activeSkuIndex].name}，确认打印吗？`
				this.showModal = true
				return
			}
			if (!this.abroad || this.merchant) {
				await this.createcheckoutFn()
				this.showModal = false
				this.payCodeShow = true
			} else {
				this.showModal = true
			}
		},
		formatWXPayToQRCode(url) {
			// 获取uQRCode实例
			var qr = new UQRCode();
			// 设置二维码内容
			qr.data = url;
			// 设置二维码大小，必须与canvas设置的宽高一致
			qr.size = 150;
			// 调用制作二维码方法
			qr.make();
			// 获取canvas上下文
			var canvasContext = uni.createCanvasContext('qrcode');
			// 设置uQRCode实例的canvas上下文
			qr.canvasContext = canvasContext;
			// 调用绘制方法将二维码图案绘制到canvas上
			qr.drawCanvas();
		},
		findPhoneModelById(phoneData, id) {
			// 遍历所有品牌
			for (const brand of phoneData) {
				// 遍历品牌下的所有手机型号
				for (const phone of brand.childrenList) {
					// 如果找到匹配的ID，返回手机名称
					if (phone.id === id) {
						return phone.name;
					}
				}
			}
			// 如果没有找到匹配的ID，返回null或提示信息
			return null;
		},

		cancelPayCode() {
			this.showModal = false
		},
		// 重新定制
		retry() { },
		async share() {
			this.$refs.shareBox.open()
		},

		// 获取手机号授权
		getPhoneNumber(e) {
			if (e.detail.code) {
				decryptPhoneNumber({
					code: e.detail.code,
				}).then(response => {
					this.setPhoneNumber(response.data)
					this.toBuy()
				})
			}

		},
		// 打印
		toPrint() {
			if (!this.detailInfo.printable) return uni.$u.toast('抱歉，此机型暂时不能打印，请切换其它机型或材质试试');
			if (!this.detailInfo || !this.detailInfo.printable) {
				return uni.$u.toast('数据加载中，请稍候')
			}
			let sukData = {
				phoneModel: this.$refs.selectPhoneModel.model.name,
				material: this.skuList[this.activeSkuIndex].name,
				id: this.detailInfo.id,
				address: this.isStore.split(':')[0],
				port: this.isStore.split(':')[1]
			}
			this.$refs.printBox.init(sukData)
		},
		// 获取分享的内容
		getShareInfo() {
			getShareInfo({
				shareRecordId: this.shareId
			}).then(res => {
				// this.detailInfo = res.data
				// this.id = this.detailInfo.id  = res.data.id
				// // await
				// // this.getCustomDetail()

				// this.activeMaterialId = this.detailInfo.materialMap[10]

				// // this.activeSkuId = this.detailInfo.skuId
				// this._phoneModelId = this.detailInfo.materialMap[11]
				// this.activeMaterialMap = res.data.materialMap // 新增：更新
				// this.$store.commit('setPhoneModelId', this._phoneModelId)
				// console.log('getShareInfo1231313132', this.activeMaterialId, this._phoneModelId)
				// console.log('getShareInfo', this.activeMaterialId, this._phoneModelId);
				// this.getSkuList(this.detailInfo.materialMap[11], true)

				// 清空旧状态
				this.skuList = [];
				this.activeSkuIndex = 0;

				// 确保先更新数据再设置状态
				this.detailInfo = res.data;
				this._phoneModelId = res.data.materialMap[11];

				// 同步Vuex状态
				this.$store.commit('setPhoneModelId', this._phoneModelId);

				// 强制更新选择器组件
				this.$nextTick(() => {
					this.getSkuList(this._phoneModelId, true);
					this.$refs.selectPhoneModel && this.$refs.selectPhoneModel.init();
				});
			})
		},

	},
	async onShareAppMessage() {
		// 确保使用最新图片
		await this.$nextTick()
		const {
			data
		} = await generateShare({
			type: 1,
			sourceType: 3,
			sourceId: this.detailInfo.id,
			shareImage: this.currentCarouselImage // 传递当前轮播图
		})
		this.$refs.shareBox.close()
		const imageUrl = await this.$refs.shareBox.drawCanvas1()
		return {
			title: '我发现了一款可以DIY定制手机壳的小程序，快来看看吧',
			imageUrl: imageUrl,
			path: `/pages/product/productDetail?scene=${data.id}`,
		}
	},
	async onLoad(e) {
		const that = this
		uni.$on('payProductStatus', function (msg) {
			this.payCodeShow = false
		})
		// 静默登录检查
		// if (!uni.getStorageSync('token')) {
		// 	await userLogin().catch(() => {
		// 		uni.$u.toast('登录失败，请重试')
		// 		return
		// 	})
		// }
		// 强制同步等待登录完成
		if (!uni.getStorageSync('token')) {
			await new Promise((resolve) => {
				const checkLogin = () => {
					if (uni.getStorageSync('token')) {
						resolve();
					} else {
						setTimeout(checkLogin, 200);
					}
				}
				checkLogin();
			});
		}
		if (e.id) {
			this.id = e.id

		} else if (e.scene) {
			uni.setStorageSync('shareRecordId', e.scene)
			this.shareId = e.scene// 立即处理分享参数（不依赖登录状态）
			await this.getShareInfo()// 确保在登录后执行
			// this.id = e.id
		} else if (uni.getStorageSync('shareRecordId')) {
			console.log('shareRecordIdsssssssssssssssssssssssss', uni.getStorageSync('shareRecordId'))
			this.shareId = uni.getStorageSync('shareRecordId')
			await this.getShareInfo()// 确保在登录后执行
		}
		// if(this.shareId){
		// 	await this.getShareInfo()// 确保在登录后执行
		// }
		// else  else {
		// 	this.detailInfo.id = e.id || ''
		// }
		// 确保默认机型状态正确
		if (this._phoneModelId) {
			this.$store.commit('setPhoneModelId', this._phoneModelId)
		}
	},

}
</script>

<style lang="scss">
/deep/ .wx-swiper-dots {
	position: absolute;
	bottom: 30rpx !important;
	/* left: 10% !important; */
}

/deep/ .wx-swiper-dots-horizontal {
	/* left: 10% !important; */
}

.custom-page {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;

	.header {
		height: 56rpx;
		line-height: 56rpx;

		.back {
			height: 25rpx;
			width: 25rpx;
			transform: rotate(180deg);
			padding: 16rpx 25rpx;
		}

		.share {
			height: 56rpx;
			width: 56rpx;
			float: right;
			margin-right: 25rpx;
		}
	}

	.custom-scroll {
		flex: 1;
		overflow: hidden;

		.share {
			height: 56rpx;
			width: 56rpx;
			position: absolute;
			right: 25rpx;
			top: 25rpx;
			z-index: 1;
			border: none;
			border-radius: 50%;

			&.btn {
				height: 110rpx;
				width: 110rpx;
				right: 5rpx;
				top: 5rpx;
				opacity: 0;
			}
		}

		.share-text {
			position: absolute;
			top: 70rpx;
			right: 20rpx;
			z-index: 1;

			.text {}

			@keyframes breathe {
				0% {
					transform: scale(1);
				}

				50% {
					transform: scale(1.15);
				}

				100% {
					transform: scale(1);
				}
			}

			.breathe-animation {
				animation: breathe 1.5s infinite ease-in-out;
			}

			.breathe-animation-delay {
				animation: breathe 1.5s infinite ease-in-out;
				animation-delay: 0.75s;
				/* 第二个文字延迟半拍 */
			}
		}

		.swiper {
			background-color: #fff;
			// height: 970rpx;
		}

		.swiper-printer {
			height: 820rpx;
		}

		.swiper-noprinter {
			height: 970rpx;
		}

		.image-view {
			height: 750rpx;
			position: relative;
			overflow: hidden;
			transform: scale(1.05) translate3d(0, 0, 0) translate(0, 50rpx);
			background: #fff;
			-webkit-backface-visibility: hidden;
			-webkit-transform: scale(1.05) translate3d(0, 0, 0) translate(0, 50rpx);
			-webkit-mask-image: -webkit-radial-gradient(white, black);

			.picture {
				height: 100%;
				width: 100%;
				position: absolute;
				top: 0;
				left: 0;

				&.btn {
					height: 110rpx;
					width: 110rpx;
					right: 5rpx;
					top: 5rpx;
					opacity: 0;
				}
			}

			.share-text {
				position: absolute;
				top: 70rpx;
				right: 20rpx;
				z-index: 1;

				.text {}

				@keyframes breathe {
					0% {
						transform: scale(1);
					}

					50% {
						transform: scale(1.15);
					}

					100% {
						transform: scale(1);
					}
				}

				.breathe-animation {
					animation: breathe 1.5s infinite ease-in-out;
				}

				.breathe-animation-delay {
					animation: breathe 1.5s infinite ease-in-out;
					animation-delay: 0.75s;
					/* 第二个文字延迟半拍 */
				}
			}

			.swiper {
				background-color: #fff;
				height: 900rpx;
			}

			.image-view {
				height: 750rpx;
				position: relative;
				overflow: hidden;
				transform: scale(1.2) translate3d(0, 0, 0) translate(0, 70rpx);
				background: #fff;
				-webkit-backface-visibility: hidden;
				-webkit-transform: scale(1.2) translate3d(0, 0, 0) translate(0, 70rpx);
				-webkit-mask-image: -webkit-radial-gradient(white, black);

				.picture {
					height: 100%;
					width: 100%;
					position: absolute;
					top: 0;
					left: 0;

					&.top,
					&.btm,
					&.bg,
					&.fg {
						height: 750rpx;
						width: 750rpx;
					}

					&.btm {
						z-index: 0;
					}

					&.bg {
						z-index: 2;
					}

					&.fg {
						z-index: 4;
					}

					&.top {
						z-index: 999;
					}

				}

				.custom-view-image {
					height: 750rpx;
					width: 750rpx;
				}

				&.btm {
					z-index: 0;
				}

				&.bg {
					z-index: 2;
				}

				&.fg {
					z-index: 4;
				}

				&.top {
					z-index: 999;
				}

			}

			.custom-view-image {
				height: 750rpx;
				width: 750rpx;
				position: absolute;
				top: 0;
				left: 0;
			}
		}


		.sku-box {
			/*  height: 380rpx; */
			position: relative;

			.bg-scroll {
				width: calc(100% - 136rpx);
				height: 210rpx;
				margin: 0 auto;

				.bg-list {
					display: flex;
					justify-content: left;
					height: 100%;

					.bg-item {
						width: 130rpx;
						height: 100%;
						margin-right: 28rpx;
						flex-shrink: 0;

						.picture {
							height: 100%;
							width: 100%;
							box-sizing: border-box;
							margin-bottom: 28rpx;
							flex-shrink: 0;
							border-radius: 17rpx;

							&.active {
								border: 5rpx solid #333;
							}
						}

						.price {
							font-size: 38.55rpx;
							font-weight: 500;
							color: #3D3D3D;
							text-align: center;
						}
					}
				}
			}

			.skus {
				display: flex;
				margin-top: 17rpx;
				justify-content: start;

				.title {
					color: #979797;
					font-size: 28rpx;
					margin-left: 35rpx;
					line-height: 50rpx;
					white-space: nowrap;
					/* margin-right: 40rpx; */
				}

				.select {
					/* display: flex;
						justify-content: start;
						flex-wrap: wrap;
						flex-grow: 0;
						flex-direction: column; */
					width: 600rpx;
					display: grid;
					grid-template-columns: 1fr 1fr;

					.skus-item {
						height: 50rpx;
						border-radius: 30rpx;
						border: 2rpx solid transparent;
						line-height: 50rpx;
						text-align: center;
						font-size: 26rpx;
						font-weight: bold;
						flex-wrap: wrap;
						justify-content: start;
						flex-shrink: 0;
						padding: 0 17rpx;
						margin: 6rpx 0 0;

						&.active {
							border: 2rpx solid #333;
						}
					}
				}

			}

			.phone-model {
				height: 50rpx;
				line-height: 50rpx;
				font-size: 28rpx;
				margin: 26rpx 35rpx 0;
				position: relative;
				color: #979797;

				.title {
					/* margin-right: 40rpx; */
				}

				.select {
					display: inline-block;
					border-radius: 50rpx;
					border: 2rpx solid #333;
					padding: 0 17rpx;
					font-size: 26rpx;
					height: 50rpx;

					text {
						font-weight: bold;
						color: #333;
					}

					.text1 {
						margin-left: 17rpx;
						font-size: 20rpx;
					}
				}

			}

			.left {
				position: absolute;
				height: 42rpx;
				width: 42rpx;
				top: 94rpx;
				left: 26rpx;
				transform: rotate(180deg);

				.icon {
					height: 100%;
					width: 100%;
				}
			}

			.right {
				position: absolute;
				height: 42rpx;
				width: 42rpx;
				top: 94rpx;
				right: 26rpx;

				.icon {
					height: 100%;
					width: 100%;
				}
			}

			.to-edit {
				width: 143rpx;
				height: 75rpx;
				border-radius: 78rpx;
				font-size: 35rpx;
				box-sizing: border-box;
				border: 2rpx solid #333333;
				text-align: center;
				line-height: 71rpx;
				background-color: #333;
				color: #fff;
				position: absolute;
				top: -110rpx;
				right: 17rpx;
			}

			.right-bar {
				position: absolute;
				left: 17rpx;
				top: -217rpx;
				background: #fff;
				border-radius: 17rpx;
				box-shadow: 0rpx 0rpx 6rpx 0rpx #ccc;
				display: flex;
				flex-direction: column;

				image {
					width: 84rpx;
					height: 50rpx;
					padding: 10rpx 10rpx 30rpx;
					position: relative;
					border-radius: 17rpx;

					&.active {
						background-color: #f3f3f3;
					}

					&:nth-child(1) {
						border-radius: 17rpx 17rpx 0 0;
						border-bottom: 1rpx solid #e2e2e2;

						&::after {
							content: '背景';
							font-size: 22rpx;
							position: absolute;
							bottom: 0;
							left: 50%;
							transform: translate(-50%);
							color: #515151;
						}
					}

					&:nth-child(2) {
						border-radius: 0 0 17rpx 17rpx;

						&::after {
							content: '人像';
							font-size: 22rpx;
							position: absolute;
							bottom: 0;
							left: 50%;
							transform: translate(-50%);
							color: #515151;
						}
					}

					&:nth-child(3) {
						position: absolute;
						top: -107rpx;
						background: #fff;
						border-radius: 17rpx;
						box-shadow: 0rpx 0rpx 6rpx 0rpx #ccc;

						&::after {
							content: '原图';
							font-size: 22rpx;
							position: absolute;
							bottom: 0;
							left: 50%;
							transform: translate(-50%);
							color: #515151;
						}
					}
				}
			}

		}

		.details {
			/* margin-top: 60rpx; */
			margin-top: 20rpx;

			.details-item {
				height: 750rpx;
				width: 750rpx;

				image {
					height: 100%;
					width: 100%;
				}
			}
		}
	}

	.custom-bottom {
		display: flex;
		height: 100rpx;
		justify-content: space-between;
		margin: 20rpx 0 0 0;
		padding: 0 47rpx;

		.custom {
			width: 250rpx;
			height: 78.8rpx;
			border-radius: 78rpx;
			font-size: 35rpx;
			box-sizing: border-box;
			text-align: center;
			line-height: 78.8rpx;
			background-color: #333;
			color: #fff;
		}

		.get-phone {
			height: 78rpx;
			opacity: 0;
			position: absolute;
			width: 250rpx;
		}

		.custom.retry {
			border: 2rpx solid #333;
			background-color: #fff;
			color: #333;
		}

		.price {
			font-size: 35rpx;
			height: 78.8rpx;
			line-height: 78.8rpx;
			font-weight: bold;
		}
	}

	.pay-code-box {
		.pay-code {
			width: 500rpx;
			height: 500rpx;
			background-color: #fff;
			border-radius: 17rpx;
			display: flex;
			flex-direction: column;
			padding: 0 20rpx;
			justify-content: space-between;
			align-items: center;

			.pay-code-title {
				font-size: 35rpx;
				font-weight: bold;
				text-align: center;
				margin-top: 30rpx;
			}

			.pay-code-image {
				width: 200rpx;
				height: 200rpx;
				margin: 0 auto;
				margin-top: 30rpx;
			}

			.pay-code-text {
				font-size: 35rpx;
				font-weight: bold;
				text-align: center;
				margin-top: 30rpx;
				background-color: #00B26A;
				color: #fff;
				border-radius: 17rpx;
				padding: 10rpx 20rpx;
			}
		}
	}

}
</style>